<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画相关</title>
    <style>
        img{
            width: 200px;
            height: 150px;
            position: relative;

        }

    </style>

</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上滑">
<input type="button" value="下滑">
<input type="button" value="自定义">
<hr>
<img src="mm3=0.jpg" alt="">

<script src="../js/jquery-1.4.2.js"></script>
<script>
    $("input:eq(0)").click(function () {
        //事件后面的方法是动画执行完回调的方法
        $("img").hide(2000,function () {
            alert("xxx");
        });

    })
    $("input:eq(1)").click(function () {
        $("img").show(2000);

    })
    $("input:eq(2)").click(function () {
        $("img").fadeOut(2000);

    })
    $("input:eq(3)").click(function(){
        $("img").fadeIn(2000);
    })
    $("input:eq(4)").click(function () {
        $("img").slideUp(2000);
    })
    $("input:eq(5)").click(function () {
        $("img").slideDown(2000);
    })
    $("input:eq(6)").click(function(){
        $("img").animate({"left":"200px"},1000)
            .animate({"top":"200px"},1000)
            .animate({"left":"0px"},1000)
            .animate({"top":"0px"},1000)
            .animate({"width":"400px","height":"300px"},1000)
            .animate({"width":"200px","height":"150px"},1000)

    })


</script>

</body>
</html>